<template>
	<view class="padding_48rpx">
		<view class="edit flex-start-center padding-left_30rpx">
			<input class="uni-input" v-model="form.name" placeholder="请输入分类名称" />


		</view>
		<view class="edit flex-start-center padding-left_30rpx margin-top_16rpx">
			<input class="uni-input" v-model="form.sort" placeholder="请输入分类排序" />


		</view>
		<sunui-upimg1 class="margin-top_20rpx" :border="'1px dashed #bfbfbf'" :formData="imgFormData"
			:storageMode="storageMode" :header="header" :size="['200rpx', '200rpx']" btnName="上传分类图"
			:uploadServerUrl="upPicUrl" ref="selectimgandupload1" @uploaded="imgLoaded1" @change="imgsChange1"
			:maxFileNumber="1"><template v-slot:icon>
				<uni-icons type="camera-filled" color="#1890FF" size="40"></uni-icons>
			</template></sunui-upimg1>
		<view class="btnSure flex" @click="addClassification()">
			{{isEdit?"编辑":'添加'}}
		</view>

	</view>
</template>

<script>
	import {
		object2Url
	} from '@/utils/trans';
	export default {
		components: {

		},
		data() {
			return {
				tabIndex: 4,
				changeValue: '',
				form: {
					// 分类名称
					name: '',
					// 分类排序
					sort: '',
					// 图片
					img: ''

				},
				imgFormData: null,
				ossInfo: null,
				upPicUrl: null,
				imgStr: [],

				storageMode: "2",
				header: null,
				token: uni.getStorageSync('login').token,
				isEdit: false,

			}
		},
		onLoad(options) {
			if (options.id) {
				this.form.id = ''
				this.form.status = ''
				this.$sun.assignObject(this.form, {
					...options
				})

				this.init(this.form)
				this.isEdit = true
				console.log(this.form)
			}

		},
		onShow() {
			this.$at.releaseKey('submit');
		},
		methods: {

			init(options) {
				this.$nextTick(() => {
					this.$refs.selectimgandupload1.setItems([options.img]);
				})


			},
			addClassification() {
				this.$at.uniDoFunc({
					key: 'submit',
					success: async () => {
						this.$at.lockKey('submit');
						// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
						if (!this.form.name) {
							this.$sun.toast("请输入分类名称", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.sort) {
							this.$sun.toast("请输入分类排序", 'none')
							this.$at.releaseKey('submit');
						} else if (!this.form.img) {
							this.$sun.toast('请选择分类图', 'none')
							this.$at.releaseKey('submit');
						} else {


							console.log((this.form))
							const saveOrUpdate = this.isEdit ? this.$api.editClassify : this.$api
								.addClassify;
							const res = await this.$http.post({
								url: saveOrUpdate,
								data: {

									...this.form
								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							console.log(res)
							if (res.code == 0) {



								// 跳转到登录页面
								this.$at.releaseKey('submit');
								this.$sun.toast(res.msg, 'none')

								setTimeout(()=>{
									this.$sun.navBack()
								},700)
							} else {
								this.$at.releaseKey('submit');
								this.$sun.toast(res.msg, 'none')
							}
						}

					}
				});


				console.log(this.form)
			},




			// 上传图片返回
			imgLoaded1(e) {
				console.log(e)

				this.img = [];
				for (let i = 0; i < e.length; i++) {
					this.img.push(e[i].url);
				}


				this.imgStr = this.img

				this.form.img = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr
					.join(',');
			},
			// “上传图片”发生改变
			imgsChange1(file) {

				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
				// 如果是2 上传  阿里云 3  七牛云

				if (file.length) {
					this.upPicUrl = this.$api.upload;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				} else {
					this.form.img = '',
						this.imgStr = []
				}

			},

		}
	}
</script>

<style lang="less" scoped>
	.edit {

		height: 108rpx;
		background: rgb(246, 248, 255);



	}

	.btnSure {
		width: 655rpx;
		height: 76rpx;
		background: rgb(81, 142, 247);
		color: rgb(255, 255, 255);
		border-radius: 108rpx;
		font-size: 32rpx;
		font-weight: 700;
		position: fixed;
		bottom: 20rpx;
	}

	page {
		background: #fff;
	}
</style>